<template>
  <div v-if="loading" class="flex flex-col justify-center items-center h-screen">
    <van-loading size="24px" vertical>数据加载中...</van-loading>
  </div>
  <div class="bg-white px-4 py-2 text-sm" v-else>
    <div class="bg-[#EEF1FD] py-5 px-4 rounded-md" v-ai-tip="'bottom-right'">
      <div class="flex flex-row justify-between items-center">
        <div class="flex flex-row items-center">
          <img class="mr-2" src="@/icons/svg/preVisit/pre_custom_name.svg" />
          <h2 class="text-xl font-bold">{{ info.subject }}</h2>
        </div>
        <p class="detail-item w-[60px]" @click="openVisitDetail">详情</p>
      </div>
      <p class="mt-2 text-sm">{{ cp_visitTime }}(GTM+8)</p>
      <markdown :content="info.visitStrategy" />
    </div>

    <div v-if="!enterNameControl && isToB" class="mt-4 bg-[#F9FAFC] py-5 px-4 rounded-md">
      <div class="flex flex-row justify-between items-center mb-6">
        <div class="flex flex-row items-center">
          <div class="w-1 h-[12px] bg-yxt-blue mr-2"></div>
          <h2 class="text-md font-bold text-[#262626]">客户信息</h2>
        </div>
        <p
          class="detail-item"
          @click="openCustomerDetail"
          v-show="showOpenCustomerDetail"
        >
          详情
        </p>
      </div>
      <span
        class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs inline font-bold"
        >公司简介</span
      >

      <markdown v-if="!enterNameControl" :content="info.introduce || '暂无公司介绍'" />

      <span class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs font-bold"
        >企业动态</span
      >

      <van-cell-group class="mt-4" v-if="cp_filterNews.length > 0">
        <van-cell
          v-for="item in cp_news"
          :key="item"
          class="py-0 px-0 border-none bg-[#F9FAFC]"
          @click="openNewsDetail(item)"
        >
          <div class="flex flex-row justify-around items-center mt-4 mb-6 text-[#262626]">
            <div class="flex flex-col items-start text-start flex-auto mr-4">
              <h4>{{ item.Title }}</h4>
              <p class="text-xs text-[#8C8C8C]">
                {{ item.PublishTime }}｜{{ item?.NewsTags }}
              </p>
            </div>
            <div
              class="w-[50px] border-light-50 border text-center py-1 text-xs rounded-sm"
            >
              {{ item.EmotionType === "negative" ? "消极" : "积极" }}
            </div>
          </div>
        </van-cell>
      </van-cell-group>
      <div
        v-else
        class="flex flex-col items-center justify-center h-[100px] bg-[#F9FAFC]"
      >
        <p class="bg-opacity-0">企业未披露公开信息</p>
      </div>
      <div
        class="flex flex-row justify-center items-center mt-1 pt-2"
        ref="showAllNewsBtn"
        @click="toggleShowAllNews"
        v-show="cp_needShowBtn"
      >
        <span class="text-yxt-blue mr-1">{{ showAllNews ? "收起" : "展开" }}</span>
        <van-icon :name="showAllNews ? 'arrow-up' : 'arrow-down'" color="#436BFF" />
      </div>
    </div>

    <div
      class="mt-4 bg-[#F9FAFC] py-5 px-4 rounded-md"
      v-if="info.lastVisitReview"
      v-ai-tip="'bottom-right'"
    >
      <div class="flex flex-row justify-between items-center mb-6">
        <div class="flex flex-row items-center">
          <div class="w-1 h-[12px] bg-yxt-blue mr-2"></div>
          <h2 class="text-md font-bold text-[#262626]">上次拜访回顾</h2>
        </div>
        <p class="detail-item" @click="openConferenceRecord(info.lastVisitReview)">
          详情
        </p>
      </div>

      <div>
        <div class="flex flex-col bg-[#EEF1FD] rounded-md p-4 mb-4">
          <div class="flex flex-row items-center">
            <img class="mr-2" src="@/icons/svg/preVisit/pre_custom_name.svg" />
            <h2 class="text-xl font-bold">{{ info.lastVisitReview?.subject }}</h2>
          </div>

          <p class="mt-2 mb-1 text-[#8C8C8C]">
            {{ info.lastVisitReview?.startTime.slice(0, 16) }} -
            {{ info.lastVisitReview?.endTime.slice(11, 16) }}
          </p>
          <p class="text-[#8C8C8C]">
            参会人：{{ info.lastVisitReview?.attendeeNames || "" }}
          </p>
        </div>

        <div
          v-show="info.lastVisitReview?.summary"
          class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs inline font-bold"
        >
          概要
        </div>
        <markdown
          v-if="info.lastVisitReview?.summary"
          :content="info.lastVisitReview?.summary"
        />

        <div class="mt-6" v-if="cp_customerMeeting">
          <div v-if="cp_customerMeeting.salesGoal" class="info-item">
            <h4>目标</h4>
            <span class="text-sm"
              >{{ cp_customerMeeting.salesGoal || "-" }}
              <span
                v-if="cp_customerMeeting.salesAchievementStatus"
                class="text-[#436BFF] ml-2 rounded-sm text-sm bg-[#E6EBFD] px-1 py-1"
              >
                {{ cp_customerMeeting.salesAchievementStatus }}
              </span></span
            >
          </div>

          <div v-if="cp_customerMeeting.salesAchievementAnalysis" class="info-item">
            <h4>达成分析</h4>
            <p>{{ cp_customerMeeting.salesAchievementAnalysis || "-" }}</p>
          </div>

          <div v-if="cp_customerMeeting.salesAchievement" class="info-item">
            <h4>成果</h4>
            <p>{{ cp_customerMeeting.achieveResult || "-" }}</p>
          </div>

          <div v-if="cp_customerMeeting.nextPlan" class="info-item">
            <h4>下一步</h4>
            <p>{{ cp_customerMeeting.nextPlan || "-" }}</p>
          </div>

          <div v-if="cp_customerMeeting.existRisk" class="info-item">
            <h4>风险</h4>
            <p>{{ cp_customerMeeting.existRisk || "-" }}</p>
          </div>
        </div>

        <div
          class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs inline font-bold"
          v-show="info.lastVisitReview?.todos.length > 0"
        >
          待办事项
        </div>

        <li
          v-for="item in info.lastVisitReview?.todos"
          :key="item"
          class="mt-6 ml-5"
          v-show="info.lastVisitReview?.todos.length > 0"
        >
          {{ item.todoContent }}
        </li>
      </div>
    </div>

    <div class="mt-4 bg-[#F9FAFC] py-5 px-4 rounded-md" v-show="cp_currentTemplate">
      <div class="flex flex-row justify-between items-center mb-6">
        <div class="flex flex-row items-center">
          <div class="w-1 h-[12px] bg-yxt-blue mr-2"></div>
          <h2 class="text-md font-bold text-[#262626]">沟通指引</h2>
        </div>
      </div>

      <div>
        <div class="flex flex-row items-center mb-4 bg-[#EEF1FD] py-5 px-4 rounded-md">
          <img class="mr-2" src="@/icons/svg/preVisit/pre_guide.svg" />
          <p>{{ cp_currentTemplate?.templateName }}</p>
        </div>
        <div class="flex flex-row items-center mb-5 justify-between px-4">
          <div class="flex flex-row items-center">
            <img class="mr-2" src="@/icons/svg/preVisit/pre_question.svg" />
            <p>需求探寻问题示例</p>
          </div>

          <div class="flex flex-row items-center ml-4">
            <img class="mr-2" src="@/icons/svg/preVisit/pre_ref.svg" />
            <p @click="changeTemplate">换一换</p>
          </div>
        </div>
        <!-- <li v-for="item in 5" :key="item" class="mt-4 mt-6 ml-5">你们的目标是什么？</li> -->
      </div>
    </div>

    <div
      class="mt-4 mb-8 bg-[#F9FAFC] py-5 px-4 rounded-md"
      v-show="cp_showCustomerDemand"
      v-ai-tip="'bottom-right'"
    >
      <div class="flex flex-row justify-between items-center mb-6">
        <div class="flex flex-row items-center">
          <div class="w-1 h-[12px] bg-yxt-blue mr-2"></div>
          <h2 class="text-md font-bold text-[#262626]">痛点与需求分析</h2>
        </div>
      </div>

      <span class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs font-bold"
        >痛点</span
      >
      <div class="h-6"></div>
      <li v-for="item in cp_painSpotList" class="text-[#262626] font-bold mt-1">
        {{ item.痛点名称 }}
        <ul class="leading-6 ml-6 font-normal mt-1">
          {{
            item.痛点描述
          }}
        </ul>
      </li>
      <div class="h-6"></div>
      <span class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs font-bold"
        >需求</span
      >
      <div class="h-4"></div>
      <li v-for="item in cp_requirementList" class="text-[#262626] font-bold mt-1">
        {{ item.需求名称 }}
        <ul class="leading-6 ml-6 font-normal mt-1">
          {{
            item.需求描述
          }}
        </ul>
      </li>
    </div>

    <div class="mt-4 mb-8 bg-[#F9FAFC] py-5 px-4 rounded-md" v-ai-tip="'bottom-right'">
      <div class="flex flex-row justify-between items-center mb-0">
        <div class="flex flex-row items-center">
          <div class="w-1 h-[12px] bg-yxt-blue mr-2"></div>
          <h2 class="text-md font-bold text-[#262626]">参会人</h2>
        </div>
      </div>

      <div
        v-show="cp_customerAttend.length > 0 && cp_isToB"
        class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs font-bold inline"
      >
        客户
      </div>
      <div class="flex flex-col">
        <div
          class="mt-4 flex flex-col items-start"
          v-show="cp_customerAttend.length > 0 && cp_isToB"
          v-for="item in cp_customerAttend"
          :key="item"
        >
          <div class="flex flex-row items-center">
            <p class="text-[#262626] text-sm">{{ item.name }}</p>
            <p class="text-[#8C8C8C] ml-2" v-if="item.position">
              （{{ item.position }} · {{ item.title }}）
            </p>
          </div>
          <markdown
            v-if="item.coreRequirement?.总结"
            :content="item.coreRequirement?.总结"
          />
        </div>
      </div>

      <div class="h-8" v-if="cp_customerAttend.length > 0"></div>

      <span class="px-1 py-[4px] text-yxt-blue bg-[#E6EBFD] rounded-sm text-xs font-bold"
        >伙伴</span
      >
      <div
        class="mt-4 flex flex-row items-center"
        v-for="item in cp_partnerAttend"
        :key="item"
      >
        <p class="text-[#262626] text-sm">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { preparVisitAPI, getCompanyId } from "@/services/orderVisit";
import { showLoadingToast, closeToast, showToast } from "vant";
import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import markdown from "@/components/markdown.vue";
import customParseFormat from "dayjs/plugin/customParseFormat";
import { useCommonStore } from "@/store";

dayjs.extend(customParseFormat);

const route = useRoute();
const router = useRouter();
const commonStore = useCommonStore();

let scheduleId = route.query.scheduleId;
const info = ref({});

const cp_visitTime = computed(() => {
  const s = dayjs(info.value.startTime).format("MM月DD日 HH:mm");
  const e = dayjs(info.value.endTime).format("HH:mm");
  return `${s} - ${e}`;
});

onMounted(() => {
  getData();
});

const loading = ref(false);
async function getData() {
  if (!scheduleId) {
    showToast("query参数错误");
    return;
  }
  loading.value = true;
  info.value = await preparVisitAPI(scheduleId);
  await commonStore.getFuncpPointsAction();
  loading.value = false;
}

const showAllNews = ref(false);
const showAllNewsBtn = ref(null);
function toggleShowAllNews() {
  showAllNews.value = !showAllNews.value;
  if (showAllNews.value == false) {
    setTimeout(() => {
      if (showAllNewsBtn.value) {
        showAllNewsBtn.value.scrollIntoView({
          behavior: "auto",
          block: "center",
          inline: "center",
        });
      }
    }, 100);
  }
}

const cp_filterNews = computed(() => {
  return info.value.news || [];
});

const cp_needShowBtn = computed(() => cp_filterNews.value?.length > 5);

const cp_isToB = computed(() => {
  return commonStore.isToB;
});

const cp_news = computed(() => {
  return showAllNews.value ? cp_filterNews.value : cp_filterNews.value?.slice(0, 5);
});

const cp_customerAttend = computed(() => {
  return (
    info.value.attendees?.filter((item) => item.attendeeType === "CUSTOMER_ATTENDEE") ||
    []
  );
});

const cp_partnerAttend = computed(() => {
  return info.value.attendees?.filter((item) => item.attendeeType === "PARTNER_ATTENDEE");
});

// 是否展示痛点与需求分析
const cp_showCustomerDemand = computed(() => {
  return cp_painSpotList.value.length > 0 && cp_requirementList.value.length > 0;
});

const cp_painSpotList = computed(() => {
  return info.value.customerDemand?.痛点列表 || [];
});

const cp_requirementList = computed(() => {
  return info.value.customerDemand?.需求列表 || [];
});

const cp_customerAttendDes = computed(() => {
  return info.value.lastVisitReview.contacts.map((v) => v.name).join(",");
});

const cp_customerMeeting = computed(() => {
  return info.value.lastVisitReview?.customerMeeting;
});

const templateIndex = ref(0);
const cp_currentTemplate = computed(() => {
  let templates = info.value.guidelines?.templates || [];
  return templates[templateIndex.value];
});

const changeTemplate = () => {
  templateIndex.value =
    (templateIndex.value + 1) % info.value.guidelines.templates.length;
};

function openNewsDetail(item) {
  window.open(item.Url, "_blank");
}

function openVisitDetail() {
  router.back();
}

const showOpenCustomerDetail = computed(() => {
  return commonStore.salesCompanyInStategy;
});

const enterNameControl = computed(() => {
  return commonStore.enterNameControl;
});

const isToB = computed(() => {
  return commonStore.isToB;
});

async function openCustomerDetail() {
  // 跳转到企业侦察机页面
  const companyName = info.value.customerName;
  const companyId = info.value.companyId;
  const token = getToken();
  const xmateBaseUrl = import.meta.env.VITE_XMATE_BASE_URL;
  const url = `${xmateBaseUrl}/postmeet-xmate-h5/#/customerDetail?companyName=${companyName}&companyId=${companyId}&token=${token}&hiddenNavBar=true`;
  window.open(url, "_blank");
}

async function openConferenceRecord(item) {
  const xmateBaseUrl = import.meta.env.VITE_XMATE_BASE_URL;
  let webUrl = `${xmateBaseUrl}/postmeet-xmate-h5/#/record/${item.conferenceId}`;
  window.open(webUrl, "_blank");
}
</script>

<style lang="less" scoped>
.detail-item {
  color: #436bff;
  font-size: 14px;
}

/deep/ p {
  line-height: 26px;
}

.info-item {
  margin-bottom: 8px;
  h4 {
    color: #8c8c8c;
    font-size: 14px;
    line-height: 22px;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    color: #262626;
    line-height: 22px;
  }
}
</style>
